<template>
<div>
  <!-- 查看帖子详情对话框 -->
  <el-dialog   :visible.sync="disabled" @close="handClose()"  width="800px" :append-to-body="true" :estroy-on-close="true">
    <div class="userInfoHeader">
      <el-avatar class="userIcon" :size="50" :src="aimTopic.topicIcon"></el-avatar>
      <div class="nickname_signature">
        <div class="userNickname"> #{{ aimTopic.topicName}}#</div>
        <div class="userSignature" style="margin-bottom: 10px">话题描述：{{ aimTopic.topicDescr }}</div>
        话题发帖数<i class="iconfont icon-tiezi"> {{this.aimTopic.inviNum}}</i>
      </div>
      <div class="time">
      <div class="createTime">话题创建时间：{{ aimTopic.createTime }}</div>
      <div class="updateTime">最近更新时间：{{ aimTopic.updateTime }}</div>
      </div>
    </div>
    <div class="userInfoMain">
      <el-tabs class="invitation" type="border-card">
        <el-tab-pane label="帖子">
          <div class="content" v-if="this.invitationList.length>0">
            <div class="invitationContent" v-for="(item,index)  in dataInvitation" v-bind:key="index">
              <div class="Col_left" @click="getInvitationInfoDetail(item)">
                <span class="threadlist_rep_num center_text" title="回复" >{{ item.commentNum }}</span>
              </div>
              <div class="Col_mid">
                <div class="Col_mid_top">
        <span class="Col_mid_top_title">

<!--          <span v-for="(item2,index)  in item.topics" v-bind:key="index">-->
<!--            <span class="invitationTopic">#{{item2.topicName}}# </span>-->
<!--          </span>-->
         <span class="inviTitle" @click="getInvitationInfoDetail(item)">
           {{item.inviTitle}}
         </span>
        </span>
                </div>
                <div class="Col_mid_under">
                  <div class="Col_mid_under_invitationContent" @click="getInvitationInfoDetail(item)">
                    {{item.inviContent}}
                  </div>
                  <!--        <div class="Col_mid_under_pic"></div>-->
                  <div class="Col_mid_under_mid">
                    <div class="Col_mid_under_right_zan">
                      <i class="iconfont icon-dianzan">  {{item.agreeNum}}</i><br/>
                      <i class="iconfont icon-liulan">  {{item.browseNum}}</i>
                    </div>
                  </div>
                  <div class="Col_mid_under_right">
                    <span class="Col_mid_under_right_time">{{item.createTime}}</span>
                  </div>
                </div>
              </div>
              <div class="Col_right">
                <el-tooltip effect="dark" class="deleteInvitation" content="删除帖子" placement="top" :enterable="false"> <!-- 鼠标放上去提示文字 enterable鼠标不可以进入到提示文字 即自动隐藏 -->
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTopic(item.inviId)"></el-button>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div class="tipsNoInvitation" v-else>该话题暂无帖子讨论</div>
          <div class="page">
            <!--              <el-pagination-->
            <!--                @current-change="handleUserInvitationPageCurrentChange"-->
            <!--                :current-page="userInviPage.page"-->
            <!--                :page-size="5"-->
            <!--                layout="total, prev, pager, next"-->
            <!--                :total="userInvitationTotal">-->
            <!--              </el-pagination>-->
            <el-pagination
              @current-change="handleUserInvitationPageCurrentChange"
              :current-page.sync="things.page"
              :page-size="4"
              layout="total, prev, pager, next"
              :total="size">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  props: {
    aimTopic: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: Number,
      default: 0
    },
    dataInvitation: {
      type: Array,
      default () {
        return {}
      }
    }
  },
  name: 'topicDetails',
  data () {
    return {
      editDialogVisible: false,
      Invitation: {
        agreeNum: -1,
        browseNum: -1,
        buildId: -1,
        commentNum: -1,
        inviContent: '',
        inviTitle: '',
        page: 1,
        pageSize: 10,
        sortOrder: '',
        topicList: '',
        userId: -1
      },
      topic: {
        createTime: '',
        page: 1,
        pageSize: 10,
        sortOrder: '',
        topicDescr: '',
        topicIcon: '',
        topicId: -1,
        topicName: '',
        updateTime: '',
        version: -1
      },
      showUserInfoDetail: {
        userId: -1,
        nickname: '',
        headPortrait: '',
        signature: '',
        invitationNumber: 0
      },
      total: 0,
      invitationList: [],
      things: {
        page: 1,
        pageSize: 4,
        sortOrder: 'topic_list',
        thing: '1'
      }
    }
  },
  methods: {
    async deleteTopic (id) {
      const { data: res } = await this.$http.get(`invitation/deleteInvite/${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除失败！')
      }
      this.$message.success('删除成功！')
      this.getTopicInvitation2()
    },
    getInvitationInfoDetail (invitation) {
      const id = invitation.inviId
      this.$router.push({
        path: '/invitations/content/',
        component: 'invitationContent',
        query: {
          inviId: id
        }
      })
    },
    handleUserInvitationPageCurrentChange (newPage) {
      this.things.page = newPage
      this.getTopicInvitation2()
    },
    async getTopicInvitation2 (topicId) {
      // this.dataInvitation = []
      // alert(1)
      this.things.thing = this.aimTopic.topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things)
      console.log(res)
      this.dataInvitation = res.data.list
      this.size = res.data.total
    },
    handClose () {
      this.disabled = false
    }
  },
  created () {
  }
}
</script>

<style scoped>
.headPortrait {
  cursor: pointer;
}
.userInfoHeader{
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}
.userInfoMain{
  width: 100%;
  height: 500px;
}
.userNickname{
  font-size: 25px;
  margin-bottom: 10px;
}
.userIcon{
  float: left;
  margin-right: 20px;
  margin-top: 15px;
  margin-left: 20px;
}
.nickname_signature {
  /*background-color: #f56c6c;*/
  width: 50%;
  float: left;
  margin-bottom: 10px;
}
.invitation{
  height: 100%;
}
.content{
  height: 400px;
}
.invitationContent
{
  height: 80px;
  border-bottom: 1px solid #E4E6EB;
}
.invitationTitle :hover{
  cursor: pointer;
  background-color: #F1F3F4;
}
.tipsNoInvitation{
  font-size: 50px;
  margin-left: 100px;
  margin-top: 100px;
  margin-bottom: 240px;
  color: #E7EAED;
}
.threadlist_rep_num {
  display: inline-block;
  width: 50px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  background: url(//tb2.bdstatic.com/tb/img/f_reply_bg_8ec77f0.png) no-repeat;
  margin-top: 10px;
  margin-left: 18%;
}
.Col_left{
  float: left;
  width: 10%;
}
.Col_mid{
  height: auto;
  width: 70%;
  float: left;
  padding-top: 8px;
}
.Col_right{
  float: left;
  height: 100px;
  width: 20%;
}
.invitationContent{
  width: 100%;
  display: block;
  left: 20vh;
  height: 100px;
  border: 1px solid #E4E6EB;
  background-color: white;
}
.invitationContent:hover{
  background-color:#F1F3F4;
  cursor: pointer;
}
.Col_mid_top_title{
  width: 50%;
  font-size: 20px;
  color: #2D64B3;
}
.Col_mid_under_invitationContent{
  width: 50%;
  float: left;
}
.Col_mid_under_mid{
  width: 25%;
  height: 50px;
  float: left;
  color: #9E9E9E;
}
.deleteInvitation{
  margin-top: 20%;
  margin-left: 30%;
}
.Col_mid_under_right {
  width: 25%;
  height: 50px;
  float: right;
  color: #9E9E9E;
  font-size: 15px;
}
.Col_mid_under_right_time{
  font-size: 13px;
}
.invitationTopic:hover{
  text-decoration:underline;
}
.inviTitle:hover{
  text-decoration:underline;
}
.Col_mid_under_invitationContent{
  margin-top: 10px;
  white-space: nowrap;/*内容超宽后禁止换行显示*/
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/*文字超出部分以省略号显示*/
}
.sub-title li{
  margin-top: 5px;
}
.sub-title li:hover{
  cursor: pointer;
  background-color: #F5F7FA;
  color: #409CFF;
}
.time{
  margin-top: 30px;
  float: right;
  margin-right: 50px;
}
.createTime{
  margin-bottom: 20px;
}
</style>
